<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
        <div>巡查排查</div>
        <img src="../../../assets/images/01_05.png" alt="" class="img_jia" @click="add">
      </div>
    </header>
    <div class="contant">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <div class="refresh-text" v-if="error" @click="onLoads">请求失败，点击重新加载</div>
        <van-list
        class="van-pull-refresh"
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        @load="onLoads()">
        <div @click="jumpDetails(item)" class="box_list" v-for="(item, index) in datas" :key="index">
          <img class="img_logo5" src="../../../assets/images/logo5.png" />
          <div class="center">
            <div style="width: 70%;">
              <div class="small_title">[{{item.jgconfigname}}]{{item.title}}</div>
              <div class="introduce">
                <div class="intro_name">
                  <div v-if="item.yhlb === 100 || item.yhlb === 102">
                    <img
                      style="width: 13px"
                      :src="item.isRectifica === 1 || item.isRectifica === 3 || item.isRectifica === 6 ? isRectificas : isRectifica" />
                  </div>
                  <div v-else>
                    <div v-if="item.hasOwnProperty('isRectifica')">
                      <img v-if="item.isRectifica !== -1" style="width: 13px" :src="isRectificas">
                    </div>
                    <div v-else>
                      <img v-if="(item.yhlb === 1 || item.yhlb === 2 || item.yhlb === 99) && item.status !== 0"
                           style="width: 13px"
                           :src="isRectificas">
                      <div v-else>
                        <img v-if="item.yhlb === 1 || item.yhlb === 2 || item.yhlb === 99"
                             style="width: 13px"
                             :src="isRectifica">
                      </div>
                    </div>
                  </div>
                  <img src="../../../assets/images/people.png" />
                  <div>{{item.userName}}</div>
                </div>
              </div>
            </div>
            <div class="data">
              {{ (new Date(item.addtime).getMonth() + 1) < 10 ? `0${new Date(item.addtime).getMonth() + 1}` : new Date(item.addtime).getMonth() + 1 }}-
              {{ (new Date(item.addtime).getDate() + 1) < 10 ? `0${new Date(item.addtime).getDate()}` : new Date(item.addtime).getDate()}}
            </div>
          </div>
        </div>
      </van-list>
      </van-pull-refresh>
    </div>
    <!-- <div class="triangle" v-show="show"></div> -->
    <div class="xz_conter" v-show="show">
      <img class="up_arr" src="../../../assets/images/C.png">
      <div @click="scan">扫一扫</div>
      <div @click="jump">非固定点</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'community_list',
    data() {
      return {
        isRectifica: require('../../../assets/images/jsd.gif'),
        isRectificas: require('../../../assets/images/lg.png'),
        title: null,
        show: false,//显示隐藏增加栏
        userId: null,//用户id
        shequ_id: 23,//社区ID
        datas: [],
        active: 0,
        loading: false,
        finished: false,
        refreshing: false,
        total: 1,
        pageInfo: {
          page: 1,
          pageSize: 20
        },
        showList: true,
        finishedText: '',
        error: false
      }
    },
    mounted () {
      var _this = this;
      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.back();
      // }, false);
    },
    beforeRouteLeave(to, from, next) {
      //设置路由的 meta
      if(!(to.path=='/hard_detail')){
        localStorage.removeItem("list_scrollTop");
      }
      next();
    },
    //进入该页面时，用之前保存的滚动位置赋值
    beforeRouteEnter (to, from, next) {
      next(vm => {
        var list_scrollTop = localStorage.getItem("list_scrollTop")?JSON.parse(localStorage.getItem("list_scrollTop")):null;
        if(list_scrollTop||list_scrollTop===0){
          $('.contant').animate({scrollTop: list_scrollTop}, 0);
        }else{
          vm.userId = localStorage.getItem("userId")//获取访问id
          vm.show = false;
          vm.datas = [];
          vm.pageInfo.page = 1;
          if (vm.datas.length === 0) {
            vm.loading = true;
            vm.onLoad()
          }
        }
        localStorage.removeItem("list_scrollTop");
      })
    },
    methods: {
      onLoads () {
        if (this.datas.length > 0) {
          this.onLoad();
        }
        if (this.error === true) {
          this.onLoad();
          this.error = false;
        }
      },
      //  分页加载
      onLoad() {
        setTimeout(() => {
          if (this.refreshing) {
            this.datas = [];
            this.refreshing = false;
          }
          if (this.datas.length !== this.total) {
            this.finished = false;
            this.query();
          } else {
            if (this.total > 15) {
              this.finishedText = '没有更多啦';
            } else {
              this.finishedText = '';
            }
            this.finished = true;
          }
        }, 1000);
      },
      //  下拉加载
      onRefresh() {
        this.pageInfo.page = 1;
        this.finished = true;
        this.loading = true;
        this.onLoad();
      },
      //  查询详情
      query () {
        /*try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }*/
        let that = this;
        let params = {
          userId: that.userId,
          page: that.pageInfo.page,
          pageSize: that.pageInfo.pageSize
        };
        var url = that.$global_msg.Url.host + '/SearchScreen/selectSearchScreenByUnitsId'
        that.axios.get(url, { params }).then(res => {
          console.log(res)
          if (res.data.code == 0) {
            if (res.data.rows.total == 0) {
              that.$toast("暂无数据");
              this.finished = true;
              return false
            }
            that.loading = false;
            that.datas = that.datas.concat(res.data.rows.list);
            // that.datas.push(res.data.rows.list[0]);
            // console.log(that.datas)
            that.total = res.data.rows.total;
            that.pageInfo.page++;
          } else {
            that.$toast(res.data.msg);
          }
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
        }).catch(error => {
            this.$terminal._error(error)
          });
        //   .catch(error => {
        //   console.log(error.message);
        //   let err = error.message;
        //   if (err === 'Network Error' || err.includes('timeout')) {
        //     that.error = true;
        //     that.finished = true;
        //     // that.$toast('网络超时，请刷新重试！');
        //     try {
        //       plus.nativeUI.closeWaiting();
        //     } catch (e) {
        //       console.log('plus问题');
        //     }
        //   }
        // });
      },
      //  返回
      back () {
        this.$router.back()
      },
      //  跳转非固定点
      jump() {
        localStorage.removeItem('param_fgd');
        localStorage.removeItem('xcdx_map_xcdxObj');
        localStorage.removeItem("xcpc_da_obj");
        this.$router.push("/feiguding");
      },
      //  跳转详情页
      jumpDetails (data) {
        if (data.patrol_troubleshoot !== 0) {
          sessionStorage.setItem("inspection_patrolTroubleshootId", data.patrol_troubleshoot);
          sessionStorage.setItem("inspection_infoId", data.patrol_troubleshoot_info_id);
          // localStorage.removeItem('domPlayString')
          this.$router.push("/hard_detail");
        } else {
          this.$router.push({
            path: '/hard_detail_ordinary',
            query: { id: data.id, ids: 14 }
          });
        }
        localStorage.setItem("list_scrollTop",$('.contant').scrollTop());
      },
      //  弹框显示
      add () {
        this.show ? this.show = false : this.show = true
      },
      //  扫一扫
      scan() {
        this.show=false
        sessionStorage.removeItem('qujiname');
        sessionStorage.removeItem('jiedaoname');
        sessionStorage.removeItem('shequname');
        sessionStorage.removeItem('number');
        sessionStorage.removeItem('yeschuan');
        sessionStorage.removeItem('str');
        sessionStorage.removeItem('fidname');
        sessionStorage.removeItem('didname');
        localStorage.removeItem("xcpc_da_obj");
        localStorage.removeItem('xcdx_map_xcdxObj');
        localStorage.setItem('xcpc_scan_fanhui',"/community_list");
        this.$router.push("/xcpc_scan");
        // this.$router.push("/inspect_detail_qy");
      }
    }
  }
</script>

<style scoped>
  .pit-evets {
    pointer-events: none;
  }
  .body{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
  }
  .van-pull-refresh {
    min-height: calc(100vh - 1.8519rem);
  }
  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .img_jia {
    width: 0.629629rem;
    height: 0.629629rem;
    position: absolute;
    right: 0.3704rem;
  }
  /* 弹框 */
  .yc {
    display: none;
  }

  .triangle {
    width: 0;
    height: 0;
    border-left: 0.2222rem solid transparent;
    border-right: 0.2222rem solid transparent;
    border-bottom: 0.4444rem solid #686868;
    position: fixed;
    top: 1.4815rem;
    right: 0.3704rem;
    z-index: 21;
  }

  .xz_conter {
    width: 2.574074rem;
    border-radius: 0.1852rem;
    background: #686868;
    position: fixed;
    top: 2.129629rem;
    right: 0.0926rem;
    color: #fff;
    font-size: 0.3889rem;


  }

  .xz_conter>div {
    margin-left: 0.5556rem;
    margin-right: 0.166666rem;
    padding: 0.2778rem 0;
    width: auto;
    height: auto;
    color: #FFFFFF;
    font-size: 0.388888rem;
    border-bottom: 1Px solid #888888;

  }
  .up_arr{
    width: 0.666666rem;
    height: 0.481481rem;
    position: absolute;
    top: -0.222222rem;
    right: 0.111111rem;
  }
  /* 主体 */
  .img_logo5 {
    width: 0.6667rem;
    height: 0.7407rem;
    margin: 0 0.2778rem;
    margin-right: 0.5556rem;
  }

  .data {
    color: #8E8E8E;
  }

  .center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0.2778rem;
    padding-top: 0.1852rem;
  }

  .intro_name {
    display: flex;
    align-items: center;
    /* margin-left: 0.5rem; */
  }

  .intro_name img {
    width: 0.2963rem;
    margin-right: 0.1852rem;
  }

  .intro_name div {
    font-size: 0.2963rem;
  }

  .introduce {
    display: flex;
    color: #8E8E8E;
    font-size: 0.3148rem;
    align-items: center;
    margin-top: 0.0926rem;
  }

  .small_title {
    width: 5.6481rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .box_list {
    /* border-bottom: 1Px solid #ddd; */
    display: flex;
    align-items: center;
    height: 1.3889rem;
  }

  .img_big {
    width: 0.629629rem;
    height: 0.629629rem;
  }

  .contant {
    width: 100%;
    flex: 1;
    overflow-y: scroll;
  }
  .refresh-text {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    color: #969799;
    font-size: 32px;
  }
</style>
